<template>
  <div>
    <section class="data_section">
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="8"
          ><div>
            <span>设备描述：{{ switchInfo.sysDescri }}</span>
          </div></el-col
        >
        <el-col :span="12"
          ><div>
            <span>距离上次启动时间：{{ switchInfo.sysUpTime }}</span>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="3"
          ><div>
            <span>接口数量：{{ switchInfo.ifNumber }}</span>
          </div></el-col
        >
        <el-col :span="6">
          <div>
            <span
              >SNMP trap：{{
                switchInfo.snmpEnableAuthenTraps == "enabled" ? "开启" : "关闭"
              }}</span
            >
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="ifTypeTableData"
        max-height="600"
        highlight-current-row
        style="width: 80%"
      >
        <el-table-column property="normal" label="10Mb口" width="220">
        </el-table-column>
        <el-table-column property="high" label="100Mb口" width="220">
        </el-table-column>
        <el-table-column property="AUI" label="AUI"> </el-table-column>
        <el-table-column property="PortChannel" label="PortChannel">
        </el-table-column>
      </el-table>

      <el-row
        :gutter="20"
        style="font-size: 20px; padding-top: 30px; padding-bottom: 20px"
      >
        <el-col :span="8"
          ><div>
            <span>IP</span>
          </div></el-col
        >
      </el-row>
      <el-table
        :data="ipTableData"
        max-height="600"
        highlight-current-row
        style="width: 80%"
      >
        <el-table-column property="ipaddress" label="IP地址" width="220">
        </el-table-column>
        <el-table-column property="ipAdEntIfNum" label="IP接口数" width="220">
        </el-table-column>
        <el-table-column property="ipNetMask" label="子网掩码">
        </el-table-column>
        <el-table-column property="ipDefaultTTL" label="TTL"> </el-table-column>
      </el-table>

      <el-row
        :gutter="20"
        style="font-size: 20px; padding-top: 30px; padding-bottom: 20px"
      >
        <el-col :span="8"
          ><div>
            <span>TCP</span>
          </div></el-col
        >
      </el-row>
      <el-table
        :data="tcpTableData"
        max-height="600"
        highlight-current-row
        style="width: 60%"
      >
        <el-table-column property="tcpRtoAlgorithm" label="RTO算法" width="220">
        </el-table-column>
        <el-table-column property="tcpRtoMax" label="RTO最大值" width="220">
        </el-table-column>
        <el-table-column property="tcpMaxConn" label="最大连接数">
        </el-table-column>
      </el-table>

      <el-row
        :gutter="20"
        style="font-size: 20px; padding-top: 30px; padding-bottom: 20px"
      >
        <el-col :span="8"
          ><div>
            <span>端口信息</span>
          </div></el-col
        >
      </el-row>
      <el-table
        :data="portTableData"
        max-height="600"
        highlight-current-row
        style="width: 60%"
      >
        <el-table-column property="protocol" label="协议" width="220">
        </el-table-column>
        <el-table-column property="ports" label="端口号"> </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
// import switchInfo from "../../../json_data/switchInfo.json";
import { get } from "../../request";
export default {
  data() {
    return {
      switchInfo: {},
      ifTypeTableData: [],
      ipTableData: [],
      tcpTableData: [],
      portTableData: [],
    };
  },

  mounted() {
    setInterval(this.sendRequest, 5000);
    // this.loadData(switchInfo)
  },
  methods: {
    sendRequest() {
      get({
        url: "/getswitchinfo",
      })
        .then((res) => {
          // var json_data = res.data.data;
          // console.log(res.data);
          this.loadData(res.data)
          // this.drawChart(json_data);
        })
        .catch((res) => {
          // this.drawChart(json.data);
        });
    },

    loadData(resdata) {
      // console.log("refresh");
      this.switchInfo = resdata;
      this.ifTypeTableData = [resdata.ifType];
      this.ipTableData = [
        {
          ipDefaultTTL: resdata.ipDefaultTTL + " ms",
          ipaddress: resdata.ipaddress,
          ipAdEntIfNum: resdata.ipAdEntIfNum,
          ipNetMask: resdata.ipNetMask,
        },
      ];
      this.tcpTableData = [
        {
          tcpRtoAlgorithm: resdata.tcpRtoAlgorithm,
          tcpRtoMax: resdata.tcpRtoMax + " ms",
          tcpMaxConn: resdata.tcpMaxConn,
        },
      ];
      this.portTableData = [
        {
          protocol: "tcp",
          ports: resdata.tcpPort,
        },
        {
          protocol: "udp",
          ports: resdata.udpPort,
        },
      ];
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.data_section {
  margin-top: 30px;
  margin-left: 30px;
  //   .data_list {
  //     text-align: center;
  //     font-size: 14px;
  //     color: #666;
  //     border-radius: 6px;
  //     background: #e5e9f2;
  // .head {
  //   border-radius: 6px;
  //   font-size: 22px;
  //   padding: 4px 0;
  //   color: #fff;
  //   display: inline-block;
  // }
  //   }
}
</style>
